<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous" />
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div class="container-fluid" id="app">
        <div class="row">
            <div class="col-md-12 text-center" style="background-color: red; color: white" >
                <h3>蜗牛书店</h3>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                <ol class="breadcrumb">
                    <li v-for="bt in typelist"><a href="javascript:void(0)" :href="'/book/showBookView/?typeid='+bt.id" v-text="bt.name"></a></li>
                </ol>
            </div>

            <div class="col-md-3">
                <form class="form-inline">
                    <div class="form-group">
                        <label for="search" class="sr-only">请输入关键词</label>
                        <input type="text" class="form-control" v-model="searchName" id="search" placeholder="请输入关键词">
                    </div>
                    <button type="button" @click.prevent="search" class="btn btn-default">搜索</button>
                </form>
            </div>

            <div class="col-md-3">
                <span v-if="account == ''">
                        <a class="btn btn-success" th:href="@{/login.html}">登录</a>
                        <a class="btn btn-primary" th:href="@{/reg.html}">注册</a>
                    </span>

                <span v-if="account != ''">
                        欢迎您: {{account}}  &nbsp;&nbsp;
                        <a class="btn btn-primary" href="">退出</a>
                    </span>

                <button type="button" class="btn btn-default btn-sm">个人中心</button>
                <a   class="btn btn-default btn-sm" th:href="@{/cart.html}">我的购物车</a>
                <a  class="btn btn-default btn-sm" th:href="@{/order.html}">我的订单</a>
            </div>
        </div>

        <div class="row">
            <div class="container">
                <div class="row">
                    <div class="col-md-12">
                        <a href="javascript:void(0)" class="btn btn-danger">清空购物车</a>
                        <table class="table">
                            <tr>
                                <th>
                                    <input type="checkbox" id="cartCheck" @click="selectAll" />
                                </th>
                                <th>图书名称</th>
                                <th>图书图片</th>
                                <th>图书单价(元)</th>
                                <th>购买数量</th>
                                <th>小计</th>
                                <th>操作</th>
                            </tr>
                            <tr v-for="c in cartList" >
                                <td>
                                    <input type="checkbox" name="cartItemCheck" @click="selectSingleCheck" :value="c.bookId" />
                                </td>
                                <td v-text="c.bookName" style="height:60px;line-height: 60px">图书名称</td>
                                <td>
                                    <img :src="c.bookSrc" style="width: 60px;height: 60px; border-radius: 50%"/>
                                </td>
                                <td v-text="c.bookPrice" style="height:60px;line-height: 60px">图书单价</td>
                                <td style="height:60px;line-height: 60px">
                                    <input type="number" :id="'cart_'+c.bookId" :value="c.buyCount" @change="updateCount(c.bookId)" style="height: 25px;text-align: center;width: 80px"/>
                                </td>
                                <td v-text="c.sumPrice" style="height:60px;line-height: 60px">图书单价</td>
                                <td style="height:60px;line-height: 60px">
                                    <a href="" class="btn btn-danger">删除</a>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>

                <div class="row">
                    <div class="col-md-6">
                        <b> 总价(元): {{allPrice}} </b>
                    </div>

                    <div class="col-md-6">
                        <button class="btn btn-success" @click="cal">结算</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script>
        let vueApp = new Vue({
            el:"#app",
            data:{
                typelist:[],
                cartList:[],
                allPrice:0.0,
                account:''
            },
            methods:{
                cal(){
                    let checkeds = $("input[name=cartItemCheck]:checked");
                    if (checkeds != null && checkeds.length > 0){
                        let idArr = [];
                        checkeds.each(function (){
                            idArr.push($(this).val())
                        })
                        location.href = "/cart/cal?idArr="+idArr ;
                    }else {
                        alert("请至少选中一个商品!");
                    }
                },

                selectAll(){
                    let check = $("#cartCheck");
                    //获取每一个购物车明细的 复选框
                    let  cs = $("input[name=cartItemCheck]");

                    cs.each(function (){
                        $(this).prop("checked",check.prop("checked"))
                    })

                    this.checkItem();
                },
                selectSingleCheck(){
                    let check = $("#cartCheck");
                    //获取每一个购物车明细的 复选框
                    let  cs = $("input[name=cartItemCheck]");

                    let flag = false ;  //默认不选中
                    cs.each(function (){
                        if ($(this).prop("checked")){
                            flag = true ;
                            return ;
                        }
                    })
                    check.prop("checked",flag)

                    this.checkItem();
                },
                checkItem(){
                    let checkeds = $("input[name=cartItemCheck]:checked");
                    let idArr = [] ; //存储选中的item的id
                    let _this = this ;
                    if (checkeds != null && checkeds.length > 0) {
                        checkeds.each(function (){
                            idArr.push($(this).val());
                        });
                        let url = "/cart/selectMyCart" ;
                        $.post(url,{"idArr":idArr},function (data){
                            _this.allPrice = data ;
                        },"json");
                    }else {

                        _this.allPrice = 0.0 ;
                    }
                },
                initBookType(){
                    let _this = this ;
                    let url = "../../home/typeList" ;
                    $.get(url,function (data){
                        console.log(data);
                        _this.typelist = data ;
                    },"json")
                },
                initCart(){
                    let _this = this ;
                    let url = "/cart/myCart" ;
                    $.post(url,function (data){
                        _this.cartList = data.carts;
                        //_this.allPrice = data.sumPrice ;
                    },"json");
                },
                updateCount(id){
                    let count = $("#cart_"+id).val();
                    console.log("bookID="+id+",count="+count);
                    let _this = this ;
                    let url = "/cart/updateCount" ;
                    $.post(url,{
                        bookId:id,
                        bookCount:count
                    },function (data){
                        if (data == 'ok') {
                            _this.initCart();
                        }else {
                            alert(data);
                            _this.initCart();
                        }
                    })
                },
                //获取用户名
                getAccount(){
                    let url = "/user/getAccount" ;
                    let _this = this ;
                    $.get(url,function (data){
                        _this.account = data ;
                    })
                }
            },
            created(){
                this.initBookType();
                this.initCart();
                this.getAccount();
            }
        })
    </script>
</body>
</html>